Skip to main content

yTable

Description​

The yTable component serves as a powerful tool primarily designed for displaying and interacting with an entity. It's an adaptable element that allows both static and dynamic content.

With the yTable you can display tables of any kind and data from any entity of your liking.

Some uses for the yTable are:

Basic Structure​

The basic structure of the yTable shall be explained in the following. For the general structure of a yComponent please visit the YBase-components basic-structure.

Table structure

The yTable as seen above contains a header, columns, rows and a footer.

The header contains the title of the table and toggleable functions for adding rows or filtering columns. It is normally visible, but can also be toggled, like the elements inside the header. You can find further explanation at the TableHeader Property and TableHeader Title.

Columns​

The columns consist of many sub-components. ColumnHeader, CounterColumn and UtilsColumn together form the columns. All three of them are normally visible but can be made invisible. The CounterColumn contains a counter to show the actual index of a row. The UtilsColumn allows you to have edit options for any row. The ColumnHeader renders the existing properties of an entity as columns.

Rows​

The rows are the actual data entries of an entity and present this data visually. You can find further explanation at the Row Property.

Finally the TableFooter contains any options for pagination. It is normally visible, but can be toggled if needed. You can find further explanation at the TableFooter Property.

Properties​

Through its various properties the yTable can be configured to suit your needs. The display below provides you with an overview of all the yTable properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
--y-table__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-table__component-type

The type of the component. For this component it is -table.

Name: name
String Property
--y-table__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-table__version

The custom version of the Table-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-table__core-theme

The CoreTheme, which will be apllied to the Table. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-table__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Table. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-table__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-table__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-table__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-table__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-table__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-table__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-table__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-table__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-table__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-table__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-table__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-table__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-table__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-table__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-table__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-table__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-table__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-table__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-table__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yTable in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

Table Elevated
Elevated
Table Flat
Flat
Table Plain
Plain
genericsizeminWidth600px
stylebackgroundbgColor__normal#44ddbb
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px
styletableHeadertableHeader__iconColor__normal#FFFFFF
styletableHeadertableHeader__bgColor__normal#44ddbb
styletableTitletableTitle__fontColor__normal#FFFFFF
stylecolumnHeadercolumnHeader__fontColor__normal#FFFFFF
stylecolumnHeadercolumnHeader__bgColor__normal#B8F2E5
stylebodyCellbodyCell__fontColor__normal#FFFFFF
stylebodyCellbodyCell__bgColor__normal#B8F2E5
stylebodyCellbodyCell__bgOpacity0.1
styletableFootertableFooter__fontColor__normal#FFFFFF
styletableFootertableFooter__bgColor__normal#44ddbb
stylecounterColumncounterColumn__fontColor__normal#FFFFFF
stylecounterColumncounterColumn__bgColor__normal#B8F2E5
stylecounterColumncounterColumn__bgOpacity0.6
styleutilsColumnutilsColumn__bgColor__normal#B8F2E5
styleutilsColumnutilsColumn__bgOpacity0.3
styleutilsColumnutilsColumn__iconColor__normal#FFFFFF

Blank​

Table Blank
Blank
styletableHeadertable-header__visiblefalse
styletableFootertable-footer__visiblefalse
stylecounterColumnshow-counter-columnfalse
styleutilsColumnshow-utils-columnfalse

Scroll-Behavior​

For purposes of loading a certain amount of data, one needs to think about a balance between performance and usability. A huge amount of data can take time to fetch and to render.
Therefore we offer a possibility to address these problems and find a solution.
For this, you simply need to modify body-cell__render-type to one of the following three options:

  • Basic
    This causes the data to be loaded at once. Applicable for small amounts of data.
  • Infinite
    Initialy, only the visible data entries are rendered, whilst other entries only get loaded and rendered additionally once the user is scrolling.
  • Virtual
    During rapid scrolling, virtual scrolling is employed internally, accompanied by a simplified scroll animation. Actual data retrieval and rendering occur only during slower scrolling, ensuring that data is loaded only when the user can effectively engage with it.

Interactive Filtering​

In combination with the integrated SourceLink system, you can build an automatic and interactive filtering.

For instance you could filter the table based on a selection inside another yTable.

How to:

  1. Change the module to Data.
  2. Create two entities with names "Order" and "Customer".
  3. Inside the "Order" entity, create a number property: "customerId".
  4. Inside the "Customer" entity, create two string properties with the names "surname" and "name".
  5. Change the module to UI-Designer.
  6. Create two yTable components in your application and connect each one to the entities you have created before.
  7. Select the created yTable which is connected to the "Order" table and proceed to the Links section within the Detail Panel.
  8. Create a SourceLink on the other yTable on the select-row event and select _id as the Data-Property.
  9. Insert the following string into the template-filter: customerId eq {value}

When both entities contain valid data, the "Order" table gets filtered each time a row in the "Customer" table gets selected, filtering based on the "customerId", showing only the orders the selected customer did.

Toggle User Actions​

  1. Header actions
    Actions that are related to the table as a whole. This means that these actions affect the table itself.
  2. Row actions
    These actions apply to single rows.
Table user actions for header
Header
Table user actions for row
Row
styletableHeaderadd-recordfalse
styletableHeadervisible-columnsfalse
styletableHeaderrefreshfalse

Pagination​

For instance, the pagination is a complex construct for defining how many data entries are loaded per view, without the the necessity to change the table page.
For this purpose the table includes mechanisms to control this usecase.

How to:

  1. Creating new pagination options
    1. Open the Detail Panel and navigate to the Style tab to unfold TableFooter.
    2. Now create a new entry for rows-per-page-options and set value and label to 75.
  2. Setting an initial value:
    1. In the Detail Panel, navigate to the Style tab and open the TableFooter section.
    2. Set the rows-per-page to 75.

Selection styling​

There are two different approaches of styling a selection inside the table, which can also be combined.

  • Row
  • Cell
Table with custom row selected
Row
Table with custom cell selected
Cell
stylerowrow-selected__bg-color#22AAFF
stylerowrow-selected__opacity80%

Changing Display Types​

The purpose of this feature presents it's necessity in displaying values of data entries in different variations.

While this might sound confusing for entries like e.g. names or numbers, in fact it is pretty useful for things like boolean values or images. For instance, having an image url which holds a profile picture of every user of your guestlist might require rendering this image as a real image and not displaying the url of it.

Therefore you can change Columns > Generic > display table on the one hand and Columns > Generic > display edit dialog on the other hand.

info

When changing the display of a column, you always need to select one and make sure the changes you made apply for the data which is stored.

E.g. while displaying a string true as a checkbox might work, displaying a url in the same way does not make sense at all.

Individual Columns​

In comparison to changing styles which apply to all cells, you can individualize each column to appear in a unique style.

This also includes the previous example Display of Cells and holds much more possibilities like changing sizing or coloration of special columns.

Table with custom sizing
Sizing
Table with custom look
Coloration
columnsgenericlabelMyCustomColumn
columnsgenericbody-cell__min-width50px
columnscolumnbody-cell__font-size22px
columnscolumnbody-cell__font-weight500

Sorting data​

The yTable component enables you to sort the data displayed by each column.

For instance, one could wish to sort ColumnA and ColumnB descending when clicking on ColumnA.

How to:

  1. Open the Detail Panel and proceed to Columns.
  2. Select the column you want to assign the sort fiter to.
  3. Unfold Generic and update the sort.

The sort filter needs to follow a defined structure to be capable of sorting as wished. For instance the string must contain the column selected. So when editing ColumnA, the sort filter needs to include this column.

When editing ColumnA, following rules need to be followed:

Correct inputs for ColumnA
  • ColumnA desc
  • ColumnB, ColumnA desc, ColumnC asc
  • ColumnB desc, ColumnA desc, ColumnC asc
  • ColumnA none, ColumnB desc, ColumnC asc
Wrong inputs for ColumnA
  • ColumnB asc,
  • ColumnA,
  • ColumnA asc Column B desc
  • desc